<template>
  <section class='f-benefit-detail'>
    <div class="f-flex-between" style="color:#666666;padding:14px 16px 10px 13px;font-size:11px">
      <p>订单编号：{{formData.withdrawOrderId}}</p>
      <p>{{ getDateTime(formData.createTime)[6] }}</p>
    </div>

    <van-cell title="供应商" :value="formData.consumerShopName" />
    <van-cell title="提现金额">
      <template #value>
        <p>{{toThousands (formData.fee) }}</p>
      </template>
    </van-cell>
    <van-cell title="状态">
      <template #value>
        <p :style="{'color': statusColor[formData.orderStatus]}">{{statusForm[formData.orderStatus]}}</p>
      </template>
    </van-cell>

    <van-cell class="f-mt-15" title="提现方式">
      <template #value>
        <p>{{formData.payType == 2? '微信': formData.payType == 3? '支付宝': '--'}}</p>
      </template>
    </van-cell>
    <van-cell title="收款账号" :value="formData.receiveAccount" />
    <van-cell title="订单流水号" :value="formData.thirdNo" />
    <van-cell title="操作人">
      <template #value>
        <p>{{formData.userName}}</p>
      </template>
    </van-cell>
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import api from '../api'
import { toThousands, getDateTime } from '@/utils/utils';

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      formData: {},

      statusForm: {
        '1': "发起提现",
        '2': "已关闭",
        '3': "提现失败",
        '4': "提现成功",
        '5': "待审核",
        '6': "待发放",
      },
      statusColor: {
        '1': "#FF8030",
        '2': "#FF2A2A",
        '3': "#FF8030",
        '4': "#4BBC1F",
        '5': "#FF8030",
        '6': "#FF8030",
      },
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '分润提现详情',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightType: 'search',
        path: '/index/uploadData'
      });

      state.withdrawOrderId = route.query.withdrawOrderId
      getDetailWithdraw(state.withdrawOrderId)
    })

    const getDetailWithdraw = (withdrawOrderId) => {
      let json = {
        withdrawOrderId
      }
      api.inDetailWithdraw(json).then(res => {
        state.formData = res.data
      })
    }

    return {
      ...toRefs(state),
      toThousands,
      getDateTime
    }
  }
}
</script>
<style lang='scss' scoped>
.f-benefit-detail {
}
</style>